<template>
  <tui-bottom-popup :show="show" @close="close">
    <view class="padding-30">
      <view class="padding-tb-10 flex-row justify-between align-center">
        <view hover-class="card-hover" :hover-stay-time="70" @click="close">
          <text class="text-30 color-t3">取消</text>
        </view>
        <view hover-class="card-hover" :hover-stay-time="70" @click="confirm">
          <text class="text-30 color-primary">确定</text>
        </view>
      </view>
      <view
        v-for="(item,index) in roleList"
        :key="index"
        class="cell flex-row align-center justify-between padding-lr-30 margin-top-30"
        :class="{'cell-checked':item.checked}"
        @click="chooseRole(item)"
      >
        <text class="text-32 color-secondary">{{ item.label }}</text>
        <l-check-box :value="item.checked" type="circle" size="48rpx" />
      </view>
    </view>
  </tui-bottom-popup>
</template>

<script>
import { fetchList } from '../../api'
export default {
  name: 'ChooseRole',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    role: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      roleList: [],
      chooseList: [],
      valueList: []
    }
  },
  computed: {
    value() {
      const arr = []
      this.roleList.forEach(item => {
        this.chooseList.forEach(chooseItem => {
          if (item.value == chooseItem.value) arr.push(item)
        })
      })
      return arr
    }
  },
  watch: {
    show(e) {
      if (e) {
        this.roleList.forEach(item => {
          if (this.role.includes(item.value + '')) {
            this.chooseList.push(item)
            item.checked = true
          } else {
            item.checked = false
          }
        })
      } else {
        this.chooseList = []
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    confirm() {
      this.$emit('confirm', this.value)
    },
    // 获取权限列表
    async fetchList() {
      const [err, res] = await fetchList({
        page: 1,
        limit: 999
      })

      const data = res.data.records
      this.roleList = data.map(item => {
        this.value.push(item.roleId)
        return {
          value: item.roleId,
          label: item.roleName,
          checked: false
        }
      })

      this.roleList.forEach(item => {
        item.checked = this.role.includes(item.value + '')
      })
    },
    chooseRole(e) {
      e.checked = !e.checked
      if (e.checked) {
        this.chooseList.push(e)
      } else {
        this.chooseList.forEach((item, key) => {
          if (e.value == item.value) this.chooseList.splice(key, 1)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.cell{
  height: 126rpx;
  background-image: linear-gradient(to left, rgba(244, 244, 244, 1), rgba(244, 244, 244, 1));
  border-radius: 20rpx;
  border: 2rpx solid $color-border;
}
.cell-checked{
  border-color:$color-secondary;
  background-image: linear-gradient(to left, rgba(218, 166, 101, 0.1), rgba(218, 166, 101, 0));
}
</style>
